<template>
  <section class="app-wrapper">
    <sidebar></sidebar>
    <div class="app-container">
      <header class="app-header">
        <navbar></navbar>
        <tags-view></tags-view>
      </header>
      <el-scrollbar class="app-content">
        <app-main></app-main>
      </el-scrollbar>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Navbar, Sidebar, TagsView, AppMain } from './components/index'

export default defineComponent({
  components: { Sidebar, Navbar, TagsView, AppMain }
})
</script>

<style lang="scss" scoped>
@import '@/styles/vars.scss';

.app-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.app-container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-header {
  width: 100%;
  z-index: 9;
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  background: $color-white;
  box-shadow: 4px 0 4px rgb(0 21 41 / 8%);
}

.app-content {
  flex: 1;
  background: $background-color-base;
}
</style>
